<template>
	<div>
		<div class="flex justify-between" style="width:100%">
			<div>
				<uv-text v-if="!value.length" type="info" @click="toggleCalendar" text="选择日期范围"></uv-text>
				<view class="flex justify-between">
					<span @click="toggleCalendar" v-if="value.length > 0" class="mr-10">{{ value.join(' - ') }}</span>
					<uv-icon name="close" size="16" @click="clearDates" v-if="value.length > 0"></uv-icon>
				</view>

			</div>
		</div>
		<uv-calendar v-if="showCalendar" ref="calendar" :defaultDate="value" mode="range" @confirm="handleConfirm"
			@close="handleClose"></uv-calendar>
	</div>
</template>

<script>
	export default {
		name: 'DateRangePicker',
		props: {
			label: {
				type: String,
				default: '证件有效期'
			},
			required: {
				type: Boolean,
				default: true
			},
			value: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				showCalendar: true
			};
		},
		methods: {
			toggleCalendar() {
				this.$refs['calendar'].open();

				// this.showCalendar = !this.showCalendar;
			},
			handleConfirm(dates) {
				let value = []
				if (dates?.length >= 2) {
					value = [dates[0], dates[dates.length - 1]]
				}
				this.$emit('handleConfirm', value);
			},
			handleClose(dates) {
				this.$emit('handleClose', dates);
			},
			clearDates() {
				this.$emit('handleConfirm', []);
			}
		}
	};
</script>

<style scoped>
	/* Add any necessary styles here */
</style>